<template>
  <div class="app-container">
    <div class="search-container">
      <common-select v-model="searchForm.isRead" name="EnumReadNoticeType" placetext="请选择消息状态" @input="getList({pageNo: 1})" />
      <el-button type="primary" icon="el-icon-search" size="small" @click="getList({pageNo: 1})">搜索</el-button>
    </div>
    <div class="function-buttons">
      <el-button type="primary" size="small" icon="el-icon-search" @click="oneClickRead">一键已读</el-button>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="#" width="80" type="index" />

        <el-table-column width="" align="center" label="发送时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="发送人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="消息名称">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="消息内容">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.isRead | filterEnumReadNoticeType }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0" type="text" @click="showUpdate(scope.row)">查看</el-button>
            <el-button v-if="scope.row.status == 0" type="text" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="pageChange" />
    </div>
    <!-- todo 调整表单字段 -->
    <el-dialog title="详情" :visible.sync="formData.formDialog" :close-on-click-modal="false" style="width: 1600px;padding-left: 600px;">
      <el-form ref="saveForm" :model="formData.props" :rules="formData.rules" label-width="180px">
        <el-form-item label="发送人" prop="operator">
          <span>{{ formData.props.operator }}</span>
        </el-form-item>
        <el-form-item label="发送时间" prop="updateTime">
          <span>{{ formData.props.updateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-form-item>
        <el-form-item label="通知标题" prop="title">
          <span>{{ formData.props.title }}</span>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <span>{{ formData.props.content }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'
import CommonSelect from '@/components/wejoy/CommonSelect'

export default {
  name: 'SysNoticeList',
  components: { Pagination, CommonSelect },
  data() {
    return {
      btnSubmitDisabled: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      formData: {
        formDialog: false,
        // 表单字段, 请自行删除不需要的
        props: {
          title: '',
          content: '',
          type: '',
          orderId: '',
          isRead: '',
          fromId: '',
          toId: '',
          operator: '',
          updateTime: '',
          status: ''
        },
        // 表单校验规则, 默认增加了必填, 请自行限制长度或者其他修改
        rules: {
          title: this.formRules({ required: true }),
          content: this.formRules({ required: true }),
          type: this.formRules({ required: true }),
          orderId: this.formRules({ required: true }),
          isRead: this.formRules({ required: true }),
          fromId: this.formRules({ required: true }),
          toId: this.formRules({ required: true }),
          operator: this.formRules({ required: true }),
          updateTime: this.formRules({ required: true }),
          status: this.formRules({ required: true })
        }
      },
      searchForm: {}
    }
  },
  created() {
    this.registerFilter('EnumReadNoticeType');
    this.getList({
      pageNo: this.listQuery.pageNo
    })
  },
  methods: {
    pageChange(page) {
      this.getList({
        pageNo: page.page,
        pageSize: page.limit
      })
    },
    getList(params) {
      this.listLoading = true
      request({
        url: '/system/sysNotice/getPageList',
        method: 'post',
        data: {
          pageNo: params.pageNo,
          pageSize: params.pageSize ? params.pageSize : this.listQuery.pageSize,
          ...this.searchForm
        }
      }).then(res => {
        const data = res.data;
        this.list = data.rows;
        this.total = data.total;
        this.listQuery.pageNo = params.pageNo;
        this.listLoading = false;
      }, () => {
        this.listLoading = false;
      })
    },
    audit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysNotice/audit?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('审核成功');
        data.status = 1;
      })
    },
    unaudit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysNotice/unaudit?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('取消审核成功');
        data.status = 0;
      })
    },
    showAdd: function() {
      // todo 清除表单中的数据
      this.formData.props = {
        id: '',
        title: '',
        content: '',
        type: '',
        orderId: '',
        isRead: '',
        fromId: '',
        toId: '',
        operator: '',
        updateTime: '',
        status: ''
      }
      this.formData.formDialog = true;
    },
    showUpdate: function(data) {
      // todo 设置数据进入表单
      this.formData.props = {
        id: data.id,
        title: data.title,
        content: data.content,
        type: data.type,
        orderId: data.orderId,
        isRead: data.isRead,
        fromId: data.fromId,
        toId: data.toId,
        operator: data.operator,
        updateTime: data.updateTime,
        status: data.status
      }
      this.haveRead(data);
      this.formData.formDialog = true;
    },
    haveRead(data) {
      var _this = this;
      request({
        url: `/system/sysNotice/haveRead?id=${data.id}`,
        method: 'post',
        data: {}
      }).then(res => {
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
        data.status = 0
      })
    },
    save: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        // todo 注意构造参数_this.formData.props
        request({
          url: '/system/sysNotice/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    oneClickRead(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysNotice/oneClickRead`,
        data: {}
      }).then(res => {
        _this.$message.success('全部已读成功');
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
        data.status = 0;
      })
    },
    remove(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysNotice/remove?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('删除成功');
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
        data.status = 0;
      })
    }
  }
}
</script>

<style scoped>

</style>
